<template>
  <!-- 进入首页之前验证是否登录，如果没有登录则跳转登录页（登录与否按localStorage里是否存储userInfo信息） -->
  <div>

    <el-select v-model="value" placeholder="请选择" popper-class="classss1" class="classss1">
      <el-option v-for="item in options" :key="item.value" popper-class="classss2" :label="item.label" :value="item.value"></el-option>
    </el-select>

    <el-row :gutter="12" style="margin-top: 15px" class="children-margin-bottom">
      <el-col :lg="6" :md="8" :sm="12" :xs="24">
        <el-card shadow="hover">
          <div slot="header">
            <h5>icon-font制作或引入</h5>
          </div>
          <custom-iconFont class="min-height-100"/>
        </el-card>
      </el-col>

      <el-col :lg="6" :md="8" :sm="12" :xs="24" v-for="i in 5" :key="i">
        <el-card shadow="hover">
          <div slot="header">
            <h5>标题：{{i+1}}</h5>
          </div>
          <div class="min-height-100">组件内容：{{i+1}}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import customIconFont from 'view/custom/custom01-iconFont'
export default {
  name: 'home',
  components: {
    customIconFont
  },
  data () {
    return {
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        },
        {
          value: '选项3',
          label: '蚵仔煎'
        },
        {
          value: '选项4',
          label: '龙须面'
        },
        {
          value: '选项5',
          label: '北京烤鸭'
        }
      ],
      value: ''
    }
  },
  beforeRouteEnter (to, from, next) {
    let login = localStorage.getItem('userInfo')
    if (login) {
      console.log(login)
      next()
    } else {
      next(vm => vm.$router.push('/login'))
    }
  },
  directives: {
    focus: function (el) {
      // 可以获取焦点<input type="text" v-focus/>
      el.focus()
    }
  }
}
</script>

<style lang="less">
.time-axis-y {
  @color: #e5e7e8;
  @color: #fa4600;
  @before-height: 8px;
  @margin-bottom: 15px;
  @icon-height: 3px;
  position: relative;
  :first-child {
    padding-left: 20px;
  }
  &::before {
    content: "。";
    position: absolute;
    top: 0;
    margin-left: 8px;
    color: @color;
    font-weight: normal;
    font-size: 18px;
    text-indent: -3px;
    width: 0;
    height: 8px;
    line-height: 8px;
  }
  & + .time-axis-y::after {
    content: " ";
    position: absolute;
    background-color: @color;
    width: 1px;
    top: -100%;
    margin-top: (@before-height + @icon-height) - @margin-bottom; // 补足before内元素的高度(包含字体本身高度) - 外部元素的间隔
    height: 100%;
    padding-top: @margin-bottom - @icon-height; // 补足外部元素的间隔 - 补足“。”高度
    margin-left: 8px;
  }
}
</style>
